<template>
  <basic-container :btnFlag = true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <div style="text-align: right; margin-top: 20px;margin-bottom: 20px;">
        <el-button :loading="submitReplyContrl" type="primary" @click="submitReply()">{{submitReplyText}}</el-button>
        <el-button type="primary" @click="goback()">取消</el-button>
      </div>
      <el-collapse v-model="activeNames" @change="handleChange" style="margin-top:2rem;">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">基本信息</div>
            </div>
          </template>
          <detail-form :data-list="dataList"></detail-form>
          <!--附件组件替换-->
          <div style="display: flex;margin-left: 72px;height: 55px;">
            <div style="font-weight: 600;"><span>附件:</span></div>
            <div style="position: relative;top: -20px; left: 20px;">
              <preview :attachementId="fileIds" v-if="fileIds" ></preview>
            </div>
          </div>

        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">规划信息</div>
            </div>
          </template>
          <div style="margin-top: 20px;margin-left: 10px;">
            <div>
              <h3 style="color: red">注：请勾选通过的规划，不勾选默认不通过</h3>
            </div>
            <avue-crud
              :data="tableData"
              :option="option"
              :table-loading="tableLoading"
              @on-load="getList"
              @refresh-change="refreshChange"
              @selection-change="selectionChange"
              class="crud-table"
            >
              <template slot-scope="scope" slot="menu">
                <div style="height: 32px;">
                  <div class="menu-title" >
                    <el-button size="mini" type="warning" :icon="getIcon(scope.row,scope.index)" v-if=selectevent(scope.row,scope.index) @click="editreason(scope.row,scope.index)">不同意理由</el-button>
                  </div>
                </div>
              </template>
            </avue-crud>
          </div>

          <!--<div style="text-align: right; margin-top: 40px;margin-bottom: 40px;">-->
          <!--<el-button :loading="submitReplyContrl" type="warning" @click="submitReply()">{{submitReplyText}}</el-button>-->
          <!--<el-button @click="goback()">取消</el-button>-->
          <!--</div>-->
        </el-collapse-item>
      </el-collapse>

      <el-dialog title="填写理由" :visible.sync="dialogVisible" width="1000px">

        <el-input
          v-model="reason"
          type="textarea"
          rows="3"
          placeholder="请填写理由"
        >

        </el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="submitReason()">确定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="规划详情" :visible.sync="detailDialogVisible" width="70%">
        <bostech-detail :detail-data="detailDataPlanning"></bostech-detail>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="detailDialogVisible = false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </basic-container>
</template>
<script>
  import {projectRegister} from "@/api/planning/project";
  import {PROJECT_DIC} from '@/const/dict';
  import {getbasisinfo} from "@/api/planning/detailList";
  import {submitReply} from "@/api/planning/detailList";
  import {projectDetail} from "@/api/planning/project";
  import {getNotNull,dealStartEndDate} from '@/views/util';
  import detailForm from '@/components/bostech-detail/form';
  import {listProcessVariables} from "@/api/activiti/monitor";

  export default {
    name: "listReply",
    components:{
      detailForm
    },
    data() {
      return {
        submitReplyText:'批复完成',
        submitReplyContrl:false,

        listId: null,
        failobj:{
          id:'',
          opinion:'',
        },
        reason:'',
        rowtemp:{},
        indextemp:'',
        idstemp:[],
        reasonList:[],
        dialogVisible: false,
        selectList:[],
        subForm:{},
        failListtemp:[],
        infoForm:{
          title:'',
          description:'',
        },
        headerData:{
          title:'批复意见'
        },
        value: "",
        radio:'',
        radio1:'',
        tempId:'',
        reasonForm:{},
        passids:[],
        failList:[],
        failListAll:[],
        hasReasonList:[],
        activeNames: ["1","2"],
        category: "A",
        opcontent:false,
        firstTrialData:[
          {label:'部门人员',value:'发改委'},
        ],
        dataList:[],
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        tableLoading: false,
        option: {
          page: false,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          selection: true,
          keyId: "id",
          column: [

            {
              label: "规划名称",
              width: 240,
              prop: "title",
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a style="cursor: pointer;" onclick="resultDetail(\'' + row.registerinfoId + '\')">' + value + '</a>';
              },
            },
            // {
            //   label: "规划期限",
            //   prop: "Planning_period",
            //   type: "select",
            //   cell: true,
            //   formatter: function (row, value, label, column) {
            //     return row.startDate + '-' + row.endDate;
            //   }
            // },
            {
              label: "申报(牵头)单位",
              prop: "orgName",
              type: "select",
              dicData: [
                {
                  label: "省发改委",
                  value: "2018330000ABB001X"
                },
                {
                  label: "省发改委",
                  value: "B"
                },
                {
                  label: "国家发改委",
                  value: "C"
                }
              ],
              cell: true
            },
            {
              label: "规划类型",
              prop: "category",
              type: "select",
              dicData:PROJECT_DIC.CATEGORY,
              cell: true
            }


          ]
        },
        detailDataPlanning:[],
        detailDialogVisible:false,
        fileIds:'',
      };
    },
    mounted() {
    },
    created(){
      window.resultDetail = this.resultDetail;
      this.init();
    },
    methods: {
      init(){
        this.listId = this.$route.query.listId;
        this.getbasisinfo();
        this.getOfficeFileId();
      },
      handleChange(val) {
      },
      getIcon(row,index){
        if(this.hasReasonList.indexOf(row.registerinfoId)>=0){
          return 'el-icon-check';
        }else{
          return 'el-icon-close';
        }
      },
      getList(page, params) {
      },
      refreshChange() {
        this.getList(this.page);
      },
      getbasisinfo(){
        getbasisinfo(this.listId).then(response => {
          this.infoForm.title=response.data.data.title;
          this.infoForm.description=response.data.data.description;
          this.subForm.taskid = response.data.data.taskId;


          this.tableData = response.data.data.planningRegisterinfoList;
          var baseinfoList = response.data.data.planningRegisterinfoList;
          for(var i in baseinfoList){
            this.failList.push({
              id:baseinfoList[i].registerinfoId,
              opinion:''
            });
            this.failListAll.push({
              id:baseinfoList[i].registerinfoId,
              opinion:''
            })
          }

          this.dataList.unshift({ label: '清单标题：', value: this.infoForm.title, span: 24 },
            { label: '清单说明：', value: this.infoForm.description, span: 24 });

        })
      },
      getOfficeFileId () {
        let params = {
          processKey: 'planning-list',
          businessKey: this.listId
        };
        listProcessVariables(params).then((res) => {
          let processVariables = res.data.data;
          if (processVariables != null) {
            let fileId = processVariables.pdfFileId ? processVariables.pdfFileId : processVariables.officeFileId;
            this.fileIds =fileId
//                        this.dataList.push({ label: '附件：', value: fileId, type: 'file', span: 24 })
          }
        });
      },
      goback(){
        this.$router.go(-1);
      },
      submitReply(){
        this.$confirm("确定批复完成吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          // 提交代码
          //去除存在failobj中的是同意的规划
          if(this.failList.filter(item => (!item.opinion || item.opinion == '')).length>0){
            this.$message({
              message: '请填写不同意的理由',
              type: 'warning'
            });
            return;
          }
          this.subForm.passIds = this.passids;
          this.subForm.failList = this.failList;
          this.submitReplyContrl=true;
          this.submitReplyText='批复中,请稍后...';
          submitReply(this.subForm).then(response => {

            if(response.data.code == 0){
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              });
              this.$router.go(-1);
            }else {
              this.submitReplyContrl=false;
              this.submitReplyText='批复完成';
              this.$notify({
                title: "失败",
                message: "批复未成功,请联系管理员",
                type: "error",
                duration: 2000
              });

            }
          })
        });
      },

      selectionChange(list){
        this.passids = [];
        for(var i in list){
          if(this.passids.indexOf(list[i].registerinfoId)<0){
            this.passids.push(list[i].registerinfoId);
          }
        }
        this.failList = this.failListAll.filter(item =>this.passids.indexOf(item.id)<0);

      },
      selectevent(row,index){
        if(this.passids.indexOf(row.registerinfoId)<0){
          return true;
        }else {
          return false;
        }
      },
      editreason(row,index){
        this.dialogVisible = true;
        this.tempId = row.registerinfoId;
        if(this.reasonForm[row.registerinfoId]){
          this.reason = this.reasonForm[row.registerinfoId]
        }else{
          this.reason = '';
        }
      },
      submitReason(){
        this.reasonForm[this.tempId] = this.reason;
        var self = this;
        this.failList = this.failList.map((v, index) => {
          if (v.id === self.tempId) {
            return {
              id: v.id,
              opinion: self.reason
            }
          }
          return v;
        });
        this.failListAll = this.failListAll.map((v, index) => {
          if (v.id === self.tempId) {
            return {
              id: v.id,
              opinion: self.reason
            }
          }
          return v;
        });
        if(this.reason){
          this.hasReasonList.push(this.tempId)
        }else{
          this.hasReasonList.remove(this.tempId)
        }
        this.dialogVisible = false;
      },
      cancel() {
        this.dialogVisible = false;
      },
      resultDetail(id){
        projectDetail(id).then(response =>{
          var records = response.data.data;
          this.detailDataPlanning = [
            {label:'规划名称',value:getNotNull(records.title)},
            {label:'规划类型',value:getNotNull(records.category,PROJECT_DIC.CATEGORY),newline:true},
            {label:'规划期限',value: dealStartEndDate(records.startDate,records.endDate),newline:true},
            {label:'申报(牵头)单位',value:getNotNull(records.orgName),newline:true},
            {label:'协同编制部门',value:getNotNull(records.supportDeptName),newline:true},
            {label:'发布层级',value:getNotNull(records.planningLevel,PROJECT_DIC.PLANNING_LEVEL),newline:true},
            {label:'发布时间',value:getNotNull(records.releaseDate,null,'date'),newline:true},
            {label:'审批机关级别',value:getNotNull(records.approvingAuthorityLevel,PROJECT_DIC.APPROVING_AUTHORITY_LEVEL),newline:true},
            {label:'审批机关性质',value:getNotNull(records.approvingAuthorityNature,PROJECT_DIC.APPROVING_AUTHORITY_NATURE),newline:true},
            {label:'联系人姓名',value:getNotNull(records.contactName),newline:true},
            {label:'联系电话',value:getNotNull(records.contactNumber),newline:true},
            {label:'规划等级',value:getNotNull(records.planningRank,PROJECT_DIC.PLANNING_RANK)},
            {label:'编制经费来源',value:getNotNull(records.financialSource)},
            {label:'立项依据',value:getNotNull(records.basis),fileName:records.basisFileId,type:'basis'},
            // {label:'规划范围',value:getNotNull(records.scope)},
            {label:'主要内容',value:getNotNull(records.content)},
            {label:'相关材料',fileName:this.multiplefiles,type:'related'}
          ];
          this.detailDialogVisible=true;
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .crud-table{
    .table{
      height: 50px;
    }
  }
</style>




<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    margin-top: 20px;
    width: 480px;
  }
  .head-title {
    color: rgb(2, 2, 2);
    text-align: left;
    display: inline;
    font-weight: 600;
  }
  .collapse-title{
    font-size:1rem;
  }
  .head-explain {
    color: #333;
    text-align: left;
    display: inline;
    font-size: 14px;
    font-weight: 600;
  }
  .form-group {
    padding: 20px;
  }
  .form-label {
    font-weight: 600;
    display: inline-block;
    width: 140px;
  }
  .collapse-header {
    display: inline-block;
    width: 94%;
  }

  .consult-button {
    margin: 2rem 0;
    text-align: center;
  }

  /deep/ .avue-crud__menu {
    min-height: 0px;
  }
</style>
